import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Drawer, Descriptions, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import AuthorityButton from '@/components/AuthorityButton';
import Field from '@ant-design/pro-field';
import { CopyOutlined } from '@ant-design/icons';

import { useIntl, FormattedMessage } from 'umi';
import { page, getrequestloginfo } from './service';

const RequestLog = () => {
  const actionRef = useRef();
  const [currentRow, setCurrentRow] = useState({});
  //drawer 显示控制
  const [drawerVisible, setDrawerVisible] = useState(false);

  //请求详情
  const requestloginfo = async (fields) => {
    await getrequestloginfo(fields).then((re) => {
      setCurrentRow(re.data || {});
    });
  };

  const valueEnum = new Map();
  valueEnum.set(true, { text: '异常', status: 'Error', });
  valueEnum.set(false, { text: '正常', status: 'Success', });
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '操作人',
      dataIndex: 'createBy',
      valueType: 'textarea',
    },
    {
      title: '操作说明',
      dataIndex: 'annotation',
      valueType: 'textarea',

      hideInSearch: true,
    },
    {
      title: '异常',
      dataIndex: 'isError',
      valueType: 'select',
      valueEnum,
    },
    {
      title: '用时(S)',
      dataIndex: 'consumedTime',
      render: (dom, entity) => {
        return (
          <a style={{ color: dom <= 1 ? '#40a9ff' : dom <= 3 ? '#faad14' : '#d9363e' }}> {dom}s</a>
        );
      },
    },
    {
      title: '请求时间',
      dataIndex: 'createAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <AuthorityButton
          type={'link'}
          key="Info"
          class={'Info'}
          text={'详情'}
          onClick={() => {
            console.log('dede');
            requestloginfo(record.id);
            setDrawerVisible(true);
          }}
        />,
      ],
    },
  ];
  const intl = useIntl();
  return (
    <PageContainer>
      <ProTable
        headerTitle="请求日志"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => {
          var queryData = [];
          var total = 0;
          await page(JSON.stringify(params)).then((re) => {
            queryData = re.data.data;
            total = re.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        pagination={{ defaultPageSize: 10 }}
      />
      {/* ------------------------ */}
      <Drawer
        title="详情"
        placement="right"
        size="large"
        onClose={() => {
          setDrawerVisible(false);
        }}
        visible={drawerVisible}
      >
        <Descriptions column={1}>
          <Descriptions.Item label="操作IP">
            <Field text={currentRow.ip} />
          </Descriptions.Item>
          <Descriptions.Item label="参考地址">
            <Field text={currentRow.refererUrl} />
          </Descriptions.Item>
          <Descriptions.Item label="请求地址">
            <Field text={currentRow.requestUrl} />
          </Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="请求数据">
            <a
              onClick={() => {
                let oInput = document.createElement('input');
                oInput.value = currentRow.parameters;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand('Copy'); // 执行浏览器复制命令
                message.success('复制成功');
                oInput.remove();
              }}
            >
              <CopyOutlined />
            </a>
            <Field text={currentRow.parameters} valueType="jsonCode" />
          </Descriptions.Item>
          <Descriptions.Item label="返回数据">
            <a
              onClick={() => {
                let oInput = document.createElement('input');
                oInput.value = currentRow.returnResult;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand('Copy'); // 执行浏览器复制命令
                message.success('复制成功');
                oInput.remove();
              }}
            >
              <CopyOutlined />
            </a>
            <Field text={currentRow.returnResult} valueType="jsonCode" />
          </Descriptions.Item>
        </Descriptions>
      </Drawer>
    </PageContainer>
  );
};

export default RequestLog;
